﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="include/iconFont/1.0.8/iconfont.css"/ >
		<script type="text/javascript" src="include/js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="include/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="include/js/zzsc.js"></script>
	</head>
	<style>
		body,ul{ margin:0px; padding:0px;}
		body{ background:#AF6332}
		li{ list-style:none;}
		.fl{ float:left;}
		.fr{ float:right;}
		.clearfix:after{ content:""; display:block;clear:both}
		.clearfix{zoom:1;}
		/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
		.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:10px; position:absolute; left:50%; top:50%; margin-left:-231px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}
		input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}
		ul{}
		li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(include/images/calBg) repeat-x; float:left; margin:12px 6px 0px;}
		.one li{ height:44px; background:url(include/images/calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}
		.one .orange{ background:url(include/images/calBg2.jpg) repeat-x; border:1px solid #875733;}
		.one .black{ background:url(include/images/calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}
		.one .gray{ background:url(include/images/calBg4.jpg) repeat-x; border:1px solid #5F6366;}
		.zero{ width:160px;}
		.one .deng{ background:url(include/images/calBg5.jpg); height:100px;}
		.twoBox{ width:353px; overflow:hidden; }
		.two{ width:358px;}
		.calBox .three { margin:0px}
		.calu{ padding:0px 10px; width:470px;}
	</style>
	<body>
		<div class="calBox" >	
		    <div class="calu" style="margin-top: 53px;">
		    	<input type="text" id="text">    	
		        <ul class="one clearfix">
		            <li class="orange on">开机</li>
		            <li class="orange off">关机</li>
		            <li class="orange clea">清屏</li>
		            <li class="black zheng">+/-</li>
		            <li class="black rec">1/x</li>
		            <li class="num">7</li>
		            <li class="num">8</li>
		            <li class="num">9</li>
		            <li class="gray oper">/</li>
		            <li class="black oper">%</li>
		            <li class="num">4</li>
		            <li class="num">5</li>
		            <li class="num">6</li>
		            <li class="gray oper">*</li>
		            <li class="black sq">√</li>           
		            <!--  -->           
		        </ul>
		        <div class="clearfix">
		            <div class="twoBox fl">
		            	<ul class="one fl two">
		                    <li class="num">1</li>
		                    <li class="num">2</li>
		                    <li class="num">3</li>
		                    <li class="gray oper">-</li>
		                    <li class="zero num">0</li>
		                    <li class="num">.</li>
		                    <li class="gray oper">+</li>
		                </ul>
		            </div>
		            <ul class="one three clearfix fl">
		                <li class="black deng fl">=</li>
		            </ul>        
		        </div>
		    </div>
		</div>
		<input type="text" id="per" style="display:none">
		<input type="text" id="text1" style="display:none">
	</body>
</html>